<template>
  <div class="wrapper">
    <div class="main">
      <div class="table">
        <el-table :height="tableHeight+'px'" :data="uncompleteList.list" border style="width: 100%">
          <el-table-column label="序号" width="80" align="center">
            <template slot-scope="scope">{{scope.$index+1}}</template>
          </el-table-column>
          <el-table-column prop="warehousingPlanId" label="单据编号" align="center" min-width="180"></el-table-column>
          <el-table-column prop="warehousingProductId" label="产品编号" align="center" min-width="180"></el-table-column>
          <el-table-column prop="warehousingBelongName" label="所属模块" align="center" min-width="180"></el-table-column>
          <el-table-column prop="warehousingCreatorName" label="申请人" align="center" min-width="100"></el-table-column>
          <el-table-column label="品质审核人" align="center">
            <el-table-column prop="warehousingQualityAuditName" label="部门主管人" align="center" min-width="120"></el-table-column>
          </el-table-column>
          <el-table-column label="入库签收人" align="center">
            <el-table-column prop="warehousingSignForName" label="上级部门负责人" align="center" min-width="150"></el-table-column>
          </el-table-column>
          <el-table-column label="ERP录入人员" align="center">
            <el-table-column prop="warehousingInputName" label="薪酬专员" align="center" min-width="120"></el-table-column>
          </el-table-column>
          <el-table-column prop="warehousingCreateTime" label="申请时间" align="center" min-width="120"></el-table-column>
          <el-table-column label="单据状态" align="center">
            <el-table-column label="审核状态" align="center" min-width="150">
              <template slot-scope="scope">
                <span v-if="scope.row.dataType === '1'">{{warehousingStatus[Number(scope.row.warehousingStatus)-1]}}</span>
                <span v-else>{{warehousingStatus2[Number(scope.row.warehousingStatus)-1]}}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="操作" align="center" min-width="180">
            <template slot-scope="scope">
              <el-button @click.native.prevent="openEditDialog(scope, 'edit')" type="text" size="small" v-if="scope.row.canModifyData==='1'">编辑</el-button>
              <el-button v-if="(scope.row.warehousingStatus==='1' && userInfo.dingId===scope.row.warehousingQualityAuditId) || (scope.row.warehousingStatus==='2' && userInfo.dingId===scope.row.warehousingSignForId) || (scope.row.warehousingStatus==='3' && userInfo.dingId===scope.row.warehousingInputId)" type="text" size="small" @click.native.prevent="openEditDialog(scope, 'check')">审核</el-button>
              <el-button type="text" size="small" @click.native.prevent="openEditDialog(scope, 'view')">查看</el-button>
              <el-button type="text" size="small" @click.native.prevent="delData(scope)" v-if="scope.row.canDeleteData==='1'">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="bottom">
        <div class="btn-wrapper"></div>
        <el-pagination background layout="prev, pager, next" :total="pageConfig.totalCount" :page-size="pageConfig.pageSize" :current-page.sync="pageConfig.pageIndex" @current-change="currentChangeHandle"></el-pagination>
      </div>
    </div>
    <AddOrEdit ref="AddOrEdit" @refreshList="getUncompleteList(true)" />
  </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
import formUtil from '@/utils/formUtil'
import AddOrEdit from '../storage/add-or-edit'
export default {
  name: '',
  data () {
    return {
      tableHeight: '',
      uncompleteList: {},
      pageConfig:{
        pageIndex: 1,
        pageSize: 15,
        totalCount: 0
      },
      warehousingStatus: ['待品质审批', '待签收', '待erp录入', 'erp录入完成'],
      warehousingStatus2: ['待部门主管审批', '待中心主管审批', '待薪酬专员核实', '已发放'],
      addDialogVisible: false,
    };
  },
  components: {
    AddOrEdit
  },
  mixins: [dingMixin],
  mounted () {
    this.tableHeight = document.documentElement['clientHeight'] - 150
    window.onresize = () => {
      this.tableHeight = document.documentElement['clientHeight'] - 150
    }
    this.getUncompleteList();
    if(this.$route.params.id) this.showEditDialog(this.$route.params.id, this.$route.params.warehousingBelongId)
  },
  methods: {
    async getUncompleteList(type) {
      if(type) this.pageConfig.pageIndex = 1
      this.uncompleteList = await this.$httpN.postB('pc/warehousing/uncompleteList',{
        page: this.pageConfig.pageIndex,
        limit: this.pageConfig.pageSize,
      });
      this.pageConfig.totalCount = this.uncompleteList.totalCount
    },
    currentChangeHandle (val) {
      this.pageConfig.pageIndex = val
      this.getUncompleteList()
    },
    openEditDialog(data, operation) {
      this.addDialogVisible = true
      this.$nextTick(() => {
        this.$refs.AddOrEdit.init(data.row.id, data.row.warehousingBelongId, data.row.warehousingBelongName, operation);
      })
    },
    showEditDialog(id, warehousingBelongId) {
      this.addDialogVisible = true
      this.$nextTick(() => {
        this.$refs.AddOrEdit.init(id, warehousingBelongId, '', 'check');
      })
    },
    async delData(data) {
      formUtil.submitConfirm('请问您是否确定删除这条记录？', async ()=> {
        if(!await this.$httpN.postB(data.row.dataType==='1' ? 'pc/warehousing/delete' : 'pc/subsidy/delete', {ids: data.row.id, warehousingBelongName: data.row.warehousingBelongName})) return;
        formUtil.submitSuccess('删除成功');
        this.getUncompleteList(true);
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.wrapper {
  height: 100%;
  width: 100%;
  padding: 0 15px;
  .main {
    height: 100%;
    padding: 15px 0;
    .search-bar {
      padding-bottom: 15px;
      display: flex;
      .btn-group {
        margin-left: 10px;
        line-height: 36px;
      }
    }
    .table {
      height: calc(100% - 43px);
      overflow: auto;
    }
    .bottom {
      height: 54px;
      padding: 13px 0;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>